<!doctype html>
<html>
<head>
	<title>Data Reports</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
	<link href='css/bootstrap.min.css' rel="stylesheet" />
	<link href="css/style.css" type="text/css" rel="stylesheet"/>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script src="js/lang.js" type="text/javascript" charset="utf8"></script>
	<script src="js/common.js" type="text/javascript" charset="utf8"></script>
</head>
<body>

<div class="container-fluid">
	<div class="col-sm-12">
		<div class="col-sm-2"></div>
		<div class="col-sm-8">
			<input type="hidden" id="id">
			<h3>
				DataSource
			</h3>
			<select id="dataSources" name="dataSources" style="width: 25%;height:25px;">
				<option value=""></option>
			</select>
			<h3>
				Description
			</h3>
			<h5 id="reportDesc"></h5>
			<h3>
				FULL SQL
				<a id="viewJsonApi" target="_blank">View JSON API</a>
			</h3>
			<h5 id="fullSql"></h5>

			<h2> Format View:</h2>
			<textarea style='width:99%;min-height:300px;border:1px #A8C7CE solid;line-height:20px;font-size:14px;overflow-y: auto' id="formattedSql">
					  	</textarea>
			<br/>
			<br/>
			<h3>OtherView:</h3>
			<table class="table table-bordered" style="background-color: #fff">
				<tr>
					<td class='td_lable' width='130'  class="lang" langKey="Status">Status</td>
					<td id="status"></td>
				</tr>
				<tr>
					<td class='td_lable' width='130'  class="lang" langKey="ReportType">ReportType</td>
					<td id="reportType"></td>
				</tr>
				<tr>
					<td class='td_lable' width='130'  class="lang" langKey="CreateUser">CreateUser</td>
					<td id="createUser"></td>
				</tr>
				<tr>
					<td class='td_lable' width='130'  class="lang" langKey="CreateTime">CreateTime</td>
					<td id="createTime"></td>
				</tr>
				<tr>
					<td class='td_lable' width='130'  class="lang" langKey="ModifyUser">ModifyUser</td>
					<td id="modifyUser"></td>
				</tr>
				<tr>
					<td class='td_lable' width='130'  class="lang" langKey="ModifyTime">ModifyTime</td>
					<td id="modifyTime"></td>
				</tr>
			</table>
			<div class="container">
				<a class="btn btn-success" href="javascript:druid.reportDetail.ajaxRequestForSaveBasicInfo();">Save</a>
				<a class="btn btn-primary" href="javascript:location.href='index.html'">Close</a>
			</div>
		</div>
		<div class="col-sm-2"></div>
	</div>
</div>
<script type="text/javascript">
    $.namespace("druid.reportDetail");
    druid.reportDetail = function () {
        var reportId = druid.common.getUrlVar("reportId");
        $("#id").val(reportId);
        return  {
            init : function() {
                druid.common.buildHead(2);
                this.ajaxRequestForBasicInfo();
                $("#viewJsonApi").attr("href", 'report-detail' + reportId + '.json');
            },
            ajaxRequestForBasicInfo : function() {
                $.ajax({
                    type: 'POST',
                    url: 'report-detail-' + reportId + '.json',
                    success: function(data) {
                        var reportInfo = data.Content;
                        if (reportInfo == null)
                            return;

                        $("#fullSql").text(reportInfo.sqlContent);
                        $("#formattedSql").text(reportInfo.sqlContent);
                        $("#reportDesc").text(reportInfo.reportDesc);
                        $("#dataSources").val(reportInfo.dbCode);

                        $("#status").text(reportInfo.status);
                        $("#reportType").text(reportInfo.reportType);
                        $("#createUser").text(reportInfo.createUser);
                        $("#createTime").text(reportInfo.createTime);
                        $("#modifyUser").text(reportInfo.modifyUser);
                        $("#modifyTime").text(reportInfo.modifyTime);


                        $.ajax({
                            type: 'POST',
                            url: 'datasource.json',
                            success: function(data) {
                                var datasourceInfo = data.Content;
                                if (datasourceInfo == null)
                                    return;
                                for(var i=0;i<datasourceInfo.length;i++){
                                    var selected=reportInfo.dbCode==datasourceInfo[i]['configCode'];
                                    if(selected){
                                        $("#dataSources").append("<option value='"+datasourceInfo[i]['configCode']+"' selected='"+selected+"'>"+datasourceInfo[i]['configName']+"</option>");
                                    }else {
                                        $("#dataSources").append("<option value='"+datasourceInfo[i]['configCode']+"'>"+datasourceInfo[i]['configName']+"</option>");
                                    }
                                }
                            },
                            dataType: "json"
                        });

                        druid.lang.trigger();
                    },
                    dataType: "json"
                });
            },
            ajaxRequestForSaveBasicInfo : function() {
                var data={
                    id:reportId,
                    sqlContent:$('#formattedSql').val(),
                    dbCode:$('#dataSources').val()
                };

                $.ajax({
                    type: 'POST',
                    url: 'report-save.json',
                    data:data,
                    success: function(data) {
                        var id = data.Content;
                        if (id == null)
                            return;
                        location.href = "report-detail.html?reportId="+id;
                    },
                    dataType: "json"
                });
            }
        }
    }();

    $(document).ready(function() {
        druid.reportDetail.init();
    });
</script>
</body>
</html>
